<template>
  <el-card class="sale">
    <template #header>
      <!-- tab栏切换 -->

      <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">销售额</el-menu-item>

        <el-menu-item index="4">访问量</el-menu-item>
      </el-menu>

      <!-- 几个radio -->
      <div class="right">
        <el-radio-group v-model="state.time">
          <el-radio-button label="今日" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="本年" />
        </el-radio-group>
        <el-date-picker v-model="state.value2" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
          start-placeholder="开始日期" end-placeholder="结束日期" />

      </div>

    </template>
    <div class="content">
      <v-chart class="line-chart" :option="getBarOption()"></v-chart>
<div class="sales-content-list">

<h4>{{ state.activeIndex=='1'? '门店销售排行':'门店访问量排行' }}</h4>
<ul>
 
  <li v-for="c1 in RankList" :key="c1.no"><span :class="{'list-no':c1.no<4}">{{ c1.no }}</span><span>{{ c1.name }}</span><span>{{ c1.count }}</span></li>

</ul>
</div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Sales'
}
</script>
<script lang="ts" setup>
import { ref, reactive,computed } from 'vue'
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from "@/stores/reportData"
import useFormat from "@/hooks/useFrmat"
const { numberFormat, moneyFormat } = useFormat()
const useReport = useReportDataStore()

//使用计算属性来对数据做一些加工
//2左侧柱状图的数据
//x轴数据
const orderFulllYearAxis = computed(() => {
  return useReport.reportInfo.orderFullYearAxis
})
//y轴数据
const orderFullYear = computed(() => useReport.reportInfo.orderFullYear)

//访问量
const userFullYearAxis = computed(() => {
  return useReport.reportInfo.userFullYearAxis
})
const userFullYear = computed(() => {
  return useReport.reportInfo.userFullYear
})
//订单排行，销售
const orderRank = computed(() => {
  return useReport.reportInfo.orderRank
})
//用户量排行
const userRank = computed(() => {
  return useReport.reportInfo.userRank
})
//定义一个数据来判断我的列表是否改渲染那个
const RankList = computed(() => {
  return state.activeIndex=='1'? orderRank.value :userRank.value
})

//3渲染左侧数据
const getBarOption = () => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: state.activeIndex=='1' ? orderFulllYearAxis.value :userFullYearAxis.value,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '30%',
        data: state.activeIndex =='1' ? orderFullYear.value :userFullYear.value
      }
    ]
  };
}



const handleSelect = (key: string, keyPath: string[]) => {
  state.activeIndex = key
}
//1定义一个对象来存储我销售额与访问量的切换
const state = reactive({
  activeIndex: '1',
  time: '本周',
  value2: ''

})

const shortcuts = [
  {
    text: '上周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
</script>

<style lang="scss" scoped>
.sale {
  margin-top: 20px;

  // 使用一个深度选择器 对当前组件中没有的类样式进行设置
  :deep(.el-card__header) {
    position: relative;
    padding: 0 20px;
    border-bottom: none;

    .right {
      position: absolute;
      right: 20px;
      top: 14px;
      display: flex;
      align-items: center;

      .el-date-editor {
        margin-left: 20px;
      }
    }

  }

  .content {
    display: flex;

    .line-chart {
      // 左侧的柱状图div
      flex: 5;
      height: 270px;
    }

    .sales-content-list {
      flex: 2;

      h4 {
        font-size: 14px;
        font-weight: 500;
      }

      ul {
        list-style: none;
        padding: 0 12px 0 0;
        font-size: 12px;

        li {
          height: 26px;
          line-height: 26px;

          span {
            cursor: pointer;

            &:first-child {
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              margin-right: 10px;
            }

            &.list-no {
              background-color: #000;
              color: #fff;
              border-radius: 50%;
            }

            &:last-child {
              float: right;
            }
          }
        }
      }
    }
  }

}
</style>